<template>
  <div id="showQuestionView">
    <a-row :gutter="[24, 24]">
      <a-col :md="12" :xs="24">
        <a-tabs default-active-key="question">
          <a-tab-pane key="question" title="题目">
            <a-card v-if="questionData" :title="questionData.title">
              <a-space wrap>
                <a-tag
                  size="large"
                  v-for="(tagsItem, index) of questionData.tags"
                  :key="index"
                  color="red"
                  >{{ tagsItem }}
                </a-tag>
              </a-space>
              <div style="margin-top: 20px">
                <a-descriptions
                  title="判题条件"
                  :column="{ xs: 1, md: 2, lg: 4 }"
                  v-if="questionData.judgeConfig"
                >
                  <a-descriptions-item label="内存限制">
                    {{ questionData.judgeConfig.memoryLimit ?? 0 }}kb
                  </a-descriptions-item>
                  <a-descriptions-item label="时间限制">
                    {{ questionData.judgeConfig.timeLimit ?? 0 }}ms
                  </a-descriptions-item>
                  <a-descriptions-item label="堆栈限制">
                    {{ questionData.judgeConfig.stackLimit ?? 0 }}kb
                  </a-descriptions-item>
                </a-descriptions>
              </div>

              <MdViewer :value="questionData.content || ''" />
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="comment" title="评论"> 暂时未开启评论</a-tab-pane>
          <a-tab-pane key="answer" title="标准答案" disabled></a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :md="12" :xs="24">
        <a-form :model="form" layout="inline">
          <a-form-item
            field="language"
            label="编程语言"
            style="min-width: 300px"
          >
            <a-select
              :style="{ width: '320px' }"
              placeholder="请选择编程语言"
              v-model="form.language"
            >
              <a-option>java</a-option>
              <a-option>cpp</a-option>
              <a-option>go</a-option>
            </a-select>
          </a-form-item>
        </a-form>
        <CodeEditor
          :language="form.language"
          :value="form.code"
          :handle-change="onCodeChange"
        />
        <a-divider size="0" />
        <a-button type="primary" size="large" @click="doSubmit">提交</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, reactive, withDefaults } from "vue";
import {
  QuestionControllerService,
  QuestionSubmitAddRequest,
  QuestionVO,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import MdViewer from "@/components/MdViewer.vue";
import CodeEditor from "@/components/CodeEditor.vue";

interface Props {
  id: string;
}

//组件属性设置默认值
const props = withDefaults(defineProps<Props>(), {
  id: () => "",
});
const form = reactive<QuestionSubmitAddRequest>({
  language: "java",
  code: "",
});

const questionData = reactive<QuestionVO>({});
const loadData = async () => {
  const res = await QuestionControllerService.getQuestionVoByIdUsingGet(
    props.id as any
  );
  if (res.code === 0) {
    Object.assign(questionData, res.data);
  } else {
    message.error("数据加载失败" + res.message);
  }
};
onMounted(() => {
  loadData();
});
const onCodeChange = (v: string) => {
  form.code = v;
};
const doSubmit = async () => {
  const res = await QuestionControllerService.doQuestionSubmitUsingPost({
    ...form,
    questionId: questionData.id,
  });
  if (res.code === 0) {
    message.success("提交成功");
  } else {
    message.error("提交失败" + res.message);
  }
};
</script>

<style scoped>
#showQuestionView {
}
</style>
